<script setup>
import { ref } from 'vue'

defineProps({
  className: String,
  srcName: String,
  altName: String
})

const _ImgOk = ref(false); // 图片加载状态

const _ImgLoad = () => {
  setTimeout(() => {
    _ImgOk.value = true; // 设置图片加载状态为 true
  }, 500)
};

</script>

<template>
  <div>
    <div :class="className" :style="{ opacity: _ImgOk ? 1 : 0 }">
      <img :src="srcName" :alt="altName" @load="_ImgLoad()" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.welcomes-img {
  width: 675px;
  height: 450px;
  margin-top: -300px;
  margin-left: 15px;
  position: relative;
  z-index: -1;
  transition: all 0.4s;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
